<template>
<div class="mainbody" @click="rootClick">
  <mu-flexbox orient="vertical" :gutter="0" class="mainbodydiv">
    <div class="headDiv flexDiv flexNoneItem">
      <div class="logo">NIMIBrain</div>
      <ul class="headUl flexDiv">
        <li>
          <a>File</a>
        </li>
        <li>
          <a>Edit</a>
        </li>
        <li>
          <a>View</a>
        </li>
        <li>
          <a>Window</a>
        </li>
        <li>
          <a>Help</a>
        </li>
        <li>
          <a>NW</a>
        </li>
      </ul>
    </div>

    <div class="topBar flexDiv flexNoneItem">
      <div class="actionDiv flexDiv">
        <a class="actionItem flexDiv" @click="gotoNew">
          <i class="icon-xinjian"></i>
          <div class="txt flexItem">新建</div>
        </a>
        <a class="actionItem flexDiv">
          <i class="icon-dakaizhuangtai"></i>
          <div class="txt flexItem">打开</div>
        </a>
        <a class="actionItem flexDiv">
          <i class="icon-baocun1"></i>
          <div class="txt flexItem">保存</div>
        </a>
      </div>
      <div class="actionDiv flexDiv">
        <a class="actionItem flexDiv">
          <i class="icon-bofang"></i>
          <div class="txt flexItem">开始</div>
        </a>
        <a class="actionItem flexDiv">
          <i class="icon-bofang1"></i>
          <div class="txt flexItem">暂停</div>
        </a>
        <a class="actionItem flexDiv">
          <i class="icon-quanping"></i>
          <div class="txt flexItem">停止</div>
        </a>
        <a class="actionItem flexDiv">
          <i class="icon-ENV"></i>
          <div class="txt flexItem">ENV</div>
        </a>
        <a class="actionItem flexDiv">
          <i class="icon-icon-fenpin"></i>
          <div class="txt flexItem">?</div>
        </a>
        <a class="actionItem flexDiv">
          <i class="icon-maobi"></i>
          <div class="txt flexItem">另存为</div>
        </a>
      </div>
    </div>

    <mu-flexbox-item class="contentDiv">
        <mu-flexbox orient="vertical" :gutter="0" class="leftBar" align="flex-start">
          <div class="leftHead">
            Class View
            <i class="lhBtn icon-llalbumshopselectorcancel"></i>
            <i class="lhBtn icon-guding"></i>
            <i class="lhBtn icon-zhankai"></i>
          </div>
          <mu-flexbox class="leftActionDiv" align="center" justify="space-around">
            <i class="laBtn icon-xinjianwenjianjia"></i>
            <i class="laBtn icon-xinjianwenjianjia"></i>
            <svg class="icon laBtnSvg" aria-hidden="true" @click="dialogNewLayer=true">
                <use xlink:href="#icon-ceng"></use>
            </svg>
            <svg class="icon laBtnSvg" aria-hidden="true">
                <use xlink:href="#icon-tongdao1"></use>
            </svg>
            <svg class="icon laBtnSvg" aria-hidden="true">
                <use xlink:href="#icon-lianjie"></use>
            </svg>
            <svg class="icon laBtnSvg" aria-hidden="true">
                <use xlink:href="#icon-zuduanlianjie"></use>
            </svg>
            <svg class="icon laBtnSvg" aria-hidden="true" :class="{'disabled':(activeProject.id=='')}" @click="btnDeleteClick">
                <use xlink:href="#icon-shanchu"></use>
            </svg>
          </mu-flexbox>
          <mu-flexbox-item class="treeDiv"> 
            <projecttree v-for="(pjitem,index) in projectList" :info="pjitem" :active="pjitem.id==activeProject.id"></projecttree> 
          </mu-flexbox-item>
        </mu-flexbox>

        <mu-flexbox-item class="rightDiv">
          <mu-flexbox-item class="topHalfDiv">
            <mu-flexbox-item class="thLeftDiv flexDiv">
              <mu-flexbox class="thlHeadBar">
                <div class="thlHeadItem">NiMiBrain&nbsp;&nbsp;<a>×</a></div>
              </mu-flexbox>
              <mu-flexbox-item class="thlContent">

              </mu-flexbox-item>
            </mu-flexbox-item>

            <mu-flexbox class="thRightDiv" :gutter="0" orient="vertical">
              <div class="thrHead">
                Properties
                <i class="lhBtn icon-llalbumshopselectorcancel"></i>
                <i class="lhBtn icon-guding"></i>
                <i class="lhBtn icon-zhankai"></i>
              </div>
              <rightEditArea :editObj="editObj" ref="rightEditArea"></rightEditArea>
              <!-- <div class="thrHead workHead">
                Properties
                <mu-flat-button label="保存" class="thrhBtn" primary :disabled="!editObjIschanged"/>
                {{editObjIschanged}}
                <i class="lhBtn icon-zhankai"></i>
              </div>
              <mu-flexbox-item class="thrContent flexDiv">
                <div style="height:100%;overflow:hidden">
                  <mu-flexbox class="netWork treeLine treeTitle flexNoneItem" :gutter="0" justify="flex-start">
                    <span class="arrow">></span>
                    <mu-flexbox-item class="title">{{editObj.info[editObj.type+'name']}}</mu-flexbox-item>
                  </mu-flexbox>
                  <div class="thrEditDiv">
                    <div v-for="(editItem,editkey) in editObj.info.layerdata">
                      <rightitem :itemkey="editkey" :itemval="editItem" @rightValChange="rightValChangeEvent"></rightitem>
                      <mu-flexbox class="thrcEditDiv" v-if="(key!='SomaTypeInfo')">
                        <div class="thrcEditItem key flexNoneItem">{{key}}</div>
                        <mu-flexbox-item class="thrcEditItem" v-if="(typeof editItem != 'object') ">{{editItem}}</mu-flexbox-item>
                      </mu-flexbox>
                      <mu-flexbox class="thrcEditDiv" v-if="(typeof editItem == 'object')" v-for="(eiItem,eikey) in editItem" style="margin-left:50px">
                        <mu-flexbox-item class="thrcEditItem">{{eikey}}</mu-flexbox-item>
                        <mu-flexbox-item class="thrcEditItem">{{eiItem}}</mu-flexbox-item>
                      </mu-flexbox>
                    </div>
                  </div>
                </div>
                <mu-flexbox class="thrcEditDiv">
                  <mu-flexbox-item class="thrcEditItem">3D Lock</mu-flexbox-item>
                  <mu-flexbox-item class="thrcEditItem">False</mu-flexbox-item>
                </mu-flexbox>
              </mu-flexbox-item> -->
            </mu-flexbox>
          </mu-flexbox-item>
          <div class="bottomHalfDiv flexDiv flexNoneItem">
            <div class="bhdHead">
              Properties
              <i class="lhBtn icon-llalbumshopselectorcancel"></i>
              <i class="lhBtn icon-guding"></i>
              <i class="lhBtn icon-zhankai"></i>
            </div>
            <mu-flexbox-item class="bhdContent"></mu-flexbox-item>
          </div>
        </mu-flexbox-item>

    </mu-flexbox-item>
  </mu-flexbox>

  <mu-dialog :open="dialogNew" title="创建新项目" @close="dialogNew=false">
    <mu-text-field hintText="请输入项目名称" fullWidth v-model="createName" />
    <mu-flat-button slot="actions" @click="dialogNew=false" primary label="取消"/>
    <mu-flat-button slot="actions" primary @click="gotoCreate" :label=" isSubmiting ? '创建中' : '创建' " :disabled="isSubmiting ? true : false"/>
  </mu-dialog>

  <mu-dialog :open="dialogNewLayer" title="Add NewLayer" @close="dialogNewLayer=false">
    <mu-text-field hintText="请输入层名称" fullWidth v-model="newLayerName" />
    <div class="dlTitle">Select Layer Train</div>
    <mu-flexbox :gutter="0" class="dlContent">
      <mu-flexbox-item>
        <mu-radio label="Sensory" name="group" nativeValue="1" v-model="newLayerType"/>
      </mu-flexbox-item>
      <mu-flexbox-item>
        <mu-radio label="Spiking" name="group" nativeValue="2" v-model="newLayerType"/>
      </mu-flexbox-item>
      <mu-flexbox-item>
        <mu-radio label="NonSpiking" name="group" nativeValue="3" v-model="newLayerType"/>
      </mu-flexbox-item>
    </mu-flexbox>
    <mu-flat-button slot="actions" @click="dialogNewLayer=false" primary label="取消"/>
    <mu-flat-button slot="actions" primary @click="gotoAddNewLayer" :label=" isSubmiting ? '创建中' : '创建' " :disabled="isSubmiting ? true : false"/>
  </mu-dialog>

  <mu-popup position="top" :overlay="true" popupClass="demo-popup-top" :open="isLoading">
    正在加载
  </mu-popup>
</div>
</template>

<script>
import projecttree from './projecttree'
import rightEditArea from './rightEditArea'
export default {
  name: 'making',
  components: {
      projecttree,rightEditArea
  },
  data () {
    return {
      isSubmiting:false,
      isLoading:false,
      dialogNew:false,
      createName:"",
      projectList : [],
      dialogNewLayer:false,
      newLayerName:"",
      newLayerType:"2",
      activeProject:{
        id:""
      },
      editObj:{
        type:"",
        info:{}
      },
      /*editObjIschanged:false,*/
      
    }
  },
  methods:{
    /*showTopPopup (txt = "正在加载",autoClose = true) {
      this.topPopup = {
          show:true,
          txt:txt
      };
      if (this.topPopupTimer) clearTimeout(this.topPopupTimer);
      if (autoClose) {
          this.topPopupTimer = setTimeout(() => { this.topPopup.show = false }, 2000);
      }
    },*/
    rootClick () {
      if (!this.editObj.info.layerdata) return;
      for (var i = 0; i < this.editObj.info.layerdata.length; i++) {
        this.editObj.info.layerdata[i].isEdit = false;
      }
    },
    gotoNew () {
      this.dialogNew = true;
    },
    gotoCreate () {
      var self = this;
      if (this.createName == ""){
        this.$root.showToast("请输入项目名称");
        return;
      } 
      if (localStorage.nmb_token && localStorage.nmb_token!="") {
        this.isSubmiting = true;
        this.$http.post(this.$root.baseUrl+'api.php/Index/nimiCreateProj', {projname:this.createName,token:localStorage.nmb_token},{emulateJSON:true}).then((response) => {
            this.$root.showToast(response.body.msg);
            if (response.body.error == 0) {
                this.dialogNew = false;
                this.loadProjectList();
            }
            this.isSubmiting = false;
        }, (response) => {
            this.isSubmiting = false;
            this.$root.showToast("创建失败");
        });
      }
      else{
        this.$root.gotoLogin();
      }
    },
    loadProjectList () {
      var self = this;
      if (localStorage.nmb_token && localStorage.nmb_token!="") {
        this.isLoading = true;
        this.$http.get(this.$root.baseUrl+'api.php/Index/nimiGetProjList/token/'+localStorage.nmb_token).then((response) => {
          this.isLoading = false;
          if (response.body.error == 0) {
            this.projectList = response.body.data;
            this.activeProject.id = this.projectList[0].id;
          }
          else if (response.body.error >= 100) {
            this.$root.gotoLogin();
          }
        }, (response) => {
          this.isLoading = false;
          this.$root.showToast("获取失败");
        });
      }
      else{
        this.$root.gotoLogin();
      }
    },
    gotoAddNewLayer(){
      var self = this;
      if (this.newLayerName == ""){
        this.$root.showToast("请输入层名称");
        return;
      } 
      if (localStorage.nmb_token && localStorage.nmb_token!="") {
        this.isSubmiting = true;
        this.$http.post(this.$root.baseUrl+'api.php/Index/nimiCreateLayer', {layername:this.newLayerName,token:localStorage.nmb_token,projid:this.activeProject.id},{emulateJSON:true}).then((response) => {
            this.isSubmiting = false;
            this.$root.showToast(response.body.msg);
            if (response.body.error == 0) {
                this.dialogNewLayer = false;
            }
        }, (response) => {
            this.isSubmiting = false;
            this.$root.showToast("创建失败");
        });
      }
      else{
        this.$root.gotoLogin();
      }
    },
    resetEditObj () {
      this.editObj={
        type:"",
        info:{}
      }
    },
    btnDeleteClick(){
      if (this.activeProject.id=="") return;
      
    }
  },
  mounted () {
    var self = this;
    this.loadProjectList();
    this.$root.eventHub.$on('layerClick', function (eo) {
      self.editObj = eo;
      self.$refs.rightEditArea.isEditTouched = false;
      self.$refs.rightEditArea.oldEditObjStr = JSON.stringify(eo);
      self.activeProject.id = "";
    });
  },
  beforeRouteLeave(to, from, next){
    sessionStorage.nmb_lastPath = to.path;
    next();
  }
}
</script>

<style scoped lang="less">
.mainbody,.mainbodydiv{
  height: 100%;
}
.headDiv{
  width: 100%;
  height: 48px;
  background-color: #000;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  .logo{
    width: 200px;
    text-align: center;
    height: 48px;
    line-height: 48px;
    color: #ff3e3e;
    font-size: 30px;
  }
  .headUl{
    height: 48px;
    margin: 0 0 0 50px;
    li{
      height: 48px;
      line-height: 48px;
      padding: 0 80px 0 0;
      a{
        color: #fff;
        font-size: 20px;
        &:hover{
          color: #aaa;
        }
      }
    }
  }
}
.topBar{
  width: 100%;
  height: 70px;
  background-color: #fff;
  padding: 0;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  .actionDiv{
    height: 40px;
    padding: 0 15px 0 0;
    margin:0 0 0 17px;
    &:nth-child(1){
      border-right: 1px solid #cbcbcb;
    }
    .actionItem{
      width: 52px;
      height: 40px;
      text-align: center;
      flex-direction: column;
      -webkit-box-pack: space-between;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
      .txt{
        text-align: center;
        color: #000;
        width: 100%;
        font-size: 11px;
        line-height: 22px;
      }
      i{
        height: 22px;
        line-height: 24px;
        font-size: 24px;
        &.icon-xinjian{
          color: #272635;
        }
        &.icon-dakaizhuangtai{
          color: #ec6941;
        }
        &.icon-baocun1{
          color: #2c58b2;
        }
        &.icon-bofang{
          color: #272635;
          font-size: 20px;
        }
        &.icon-bofang1{
          color: #ec6941;
          font-size: 20px;
        }
        &.icon-quanping{
          color: #2c58b2;
          font-size: 22px;
        }
        &.icon-ENV{
          color: #272635;
        }
        &.icon-icon-fenpin{
          color: #ec6941;
        }
        &.icon-maobi{
          color: #2c58b2;
          font-size: 26px;
        }
      }
    }
  }
}
.contentDiv{
  margin:0;
  display: -webkit-box; 
  display: -webkit-flex;
  display: flex;
  background-color: #e8e8e8;
  overflow: hidden;
  .leftBar{
    width:208px;
    .leftHead{
      background-color: #ff3e3e;
      width:100%;
      height: 30px;
      line-height: 30px;
      color:#fff;
      padding:0 5px 0 12px;
      margin:0;
      .lhBtn{
        width:20px;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        float: right;
        &.icon-zhankai{
          margin:0 7px 0 0;
        }
      }
    }
    .leftActionDiv{
      width:100%;
      height:28px;
      padding:0 6px;
      & >*{
        cursor: pointer;
      }
      .laBtn{
        font-size: 20px;
        color:#a5a3a3;
      }
      .laBtnSvg{
        width: 20px;
        height:20px;
      }
    }
    .treeDiv{
      width:203px;
      background-color: #fff;
      padding:10px 12px;
    }
  }
  .rightDiv{
    display: -webkit-box; 
    display: -webkit-flex;
    display: flex;
    box-orient: vertical;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    .topHalfDiv{
      width:100%;
      display: -webkit-box; 
      display: -webkit-flex;
      display: flex;
      overflow: hidden;
      .thLeftDiv{
        margin:0 6px 0 0;
        box-orient: vertical;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        .thlHeadBar{
          width:100%;
          height:30px;
          .thlHeadItem{
            padding:0 14px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color:#686868;
            &.active{
              background-color: #d8d8d8;
              color:#000;
            }
            a{
              color:#333;
              font-size: 18px;
            }
          }
        }
        .thlContent{
          width:100%;
          background-color: #a5a3a3;
        }
      }
      .thRightDiv{
        width: 250px;
        overflow: hidden;
        .thrHead{
          background-color: #000;
          width:100%;
          height: 30px;
          line-height: 30px;
          color:#fff;
          margin:0;
          .thrhBtn{
            height: 20px;
            line-height: 20px;
            min-width: 40px;
          }
          .lhBtn{
            width:20px;logiun
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            float: right;
            &.icon-zhankai{
              margin:0 7px 0 0;
            }
          }
          &.workHead{
            background: none;
            color:#000;
          }
        }
      }
    }
    .bottomHalfDiv{
      width:100%;
      height:235px;
      box-orient: vertical;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      .bhdHead{
        width:100%;
        height: 30px;
        line-height: 30px;
        color:#000;
        margin:0;
        .lhBtn{
          width:20px;
          height: 30px;
          line-height: 30px;
          font-size: 12px;
          float: right;
          &.icon-zhankai{
            margin:0 7px 0 0;
          }
        }
        &.workHead{
          background: none;
          color:#000;
        }
      }
      .bhdContent{
        background-color: #000;
        width: 100%;
        margin:0;
      }
    }
  }
}
.dlTitle{
  height: 30px;
  line-height: 30px;
  margin:0 0 10px 0;
}
.dlContent{
  .mu-flexbox-item{
    text-align: center;
  }
}

</style>